<template>
	<div id="box">
		<van-list
		  v-model="loading"
		  :finished="finished"
		  finished-text="你已经看到我的底线了"
		  @load="onLoad"
		  :immediate-check="false"
		>
			<van-cell v-for="item in datalist" :key="item.filmId" @click="toDetail(item.filmId)">
				<img :src= "item.poster" />
				<div>
					<div>{{item.name}}</div>
					<div :class="item.grade?'':'hidden'">观众评分：{{item.grade}}</div>
					<div> <span class='yanyuan' v-for="suoyin in item.actors">{{suoyin.name}}</span></div>
					<div>{{item.nation}} | {{item.runtime}}分钟</div>
				</div>
				<button type="button" @click.stop="buyticket(item.name)">购票</button>
			</van-cell>
		</van-list>

	</div>
</template>

<script>
	import http from '../../util/http.js'
	export default{
		data(){
			return{
				datalist:[],
				loading: false,
				finished: false,
				current:1
			}
		},
		mounted() {
			let _this = this
			setTimeout(()=>{
				http({
					url:`/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=1&k=9804432`,
					headers:{
						'X-Host':'mall.film-ticket.film.list'
					}
				}).then(res => {_this.datalist = res.data.data.films;})
			},1000)
		},
		methods:{
			buyticket(name){
				console.log("购买"+name+"成功")
			},
			toDetail(id){
				this.$router.push(`/Detail/${id}`)
			},
			onLoad() {
			      // 异步更新数据
				  this.current++;
				  let _this = this
				  setTimeout(()=>{
				  	http({
				  		url:`/gateway?cityId=${this.$store.state.cityId}&pageNum=${_this.current}&pageSize=10&type=1&k=9804432`,
				  		headers:{
				  			'X-Host':'mall.film-ticket.film.list'
				  		}
				  	}).then(res => {
						_this.datalist= [..._this.datalist, ...res.data.data.films];
						_this.loading = false;
						if (this.datalist.length >= res.data.data.total) {        //判断结束条件
						          this.finished = true;
						        }
					})
				  },1000);
			}
		}
	}
</script>

<style type="text/css" lang="scss" scoped="scoped">
	.hidden{
		display: none;
	}
	.van-cell>div{
		display: flex;
		justify-content: space-around;
		align-items: center;
		list-style-type: none;
		height: 7.5rem;
		font-size: 15px;
		width: 100%;
	}
	.van-cell>div>img{
		width: 4.5rem;
		height: 6rem;
		display: block;
	}
	.van-cell>div>div{
		width: 11rem;
		height: 6.25rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.van-cell>div>div>div{
		color: gray;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.van-cell>div>div>div:nth-child(1){
		font-size: 18px;
		font-weight: bold;
		color: black;
		margin-bottom: 0.625rem;
	}
	.van-cell>div>button{
		height: 1.25rem;
		line-height: 1.25rem;
		color: orange;
		outline: none;
		border: none;
		background-color: white;
	}
	.yanyuan{
		margin-right: 0.3125rem;
	}
</style>
